<template>
  <div>
    <div
      class="leftListBox"
      :style="listBoxStyle"
      :class="{ leftListBoxDark: darkFlag }"
    >
      <!-- 便签列表 -->
      <p class="htitle">便签</p>
      <div class="memListBox">
        <div
          class="memItem"
          :class="{ memItemDark: darkFlag }"
          v-for="(item, index) in memList"
          :key="item.text_id"
          @click="openMem(index)"
        >
        <!--  | sortByUpdateTime -->
          <i class="el-icon-delete" @click.stop="itemDelete(index)"></i>
          <p class="memItemTitle">{{ item.title }}</p>
          <p class="memTime">{{ item.updateTime }}</p>
        </div>
      </div>
      <!-- 新建按钮 -->
      <transition name="appear">
        <div class="addMem" @click="addMem()" v-if="!flag">
          <i class="el-icon-plus"></i>
        </div>
      </transition>
    </div>
    <!-- 打开页面按钮 -->
    <div class="btnBox" @mousedown="listOn()">
      <div
        :class="{
          openBtnChange: !this.flag,
          openBtnDark: darkFlag,
          openBtnChangeDark: darkFlag & !this.flag,
        }"
        class="openBtn"
      >
        <span
          class="iconfont icon-xiangyoujiantou"
          style="font-size: 20px"
        ></span>
      </div>
    </div>
    <!-- 删除分页确认弹窗 -->
    <transition name="appear">
      <div class="addNavBg" v-if="this.deleteMemflag">
        <div
          class="addNavBox"
          style="height: 160px"
          :class="{ addNavBoxDark: darkFlag }"
        >
          <h2>确认删除</h2>
          <p
            class="addNavBoxP"
            style="text-align: center; margin: 20px; font-size: 16px"
          >
            确认删除该便签吗？
          </p>
          <div class="addBtnBox">
            <button @click="deleteMemOK">确定</button>
            <button style="margin-left: 25px" @click="deleteMemNo">取消</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 便签主体弹窗 -->
    <transition name="appear">
      <div class="memMainBg" v-if="memMainDisFlag" :class="{ memMainBgDark: darkFlag }">
        <div
          class="memMainBox"
          :class="{ memMainBoxDark: darkFlag }"
          v-for="(item, index) in memList"
          :key="index"
          v-show="chooseIndex == index"
        >
          <div class="memMainClose" @click.prevent="closeMemMain(index)">
            <i class="el-icon-close"></i>
          </div>
          <textarea
            name=""
            id=""
            cols="30"
            rows="10"
            placeholder="在此处输入便签"
            v-model="oldtext"
          >
          </textarea>
          <div class="memMainTimeBox">
            <p>创建时间：{{ item.createTime }}</p>
            <p>最近修改时间：{{ item.updateTime }}</p>
          </div>
          <div class="saveI" @click="saveMem()" >
            <i class="el-icon-receiving"> 保存</i>
          </div>
        </div>
      </div>
    </transition>
    <!-- 关闭确认弹窗 -->
    <transition name="appear">
      <div class="saveWarnBg" v-if="saveWarnFlag" :class="{ saveWarnBgDark: darkFlag }">
        <div class="saveWarnBox" :class="{ saveWarnBoxDark: darkFlag }">
          <p class="stitle" :class="{ stitleDark: darkFlag }">确认关闭</p>
          <p class="sP" :class="{ sPDark: darkFlag }">是否保存修改并关闭？</p>
          <div class="saveWarnBtnBox">
            <button @click="saveOK">确认保存</button>
            <button style="margin-left: 25px" @click="saveNO">取消保存</button>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import bus from "../bus";
import axios from "axios";
import "../main";

export default {
  data() {
    return {
      listBoxStyle: {
        width: "",
        height: "",
      },
      flag: true,
      // darkFlag: false,
      memList: [
        {
          text_id: 0,
          title: "橘猫起始页",
          createTime: "2023/3/24 11:11",
          updateTime: "2023/3/24 22:22",
          text: "",
        },
      ],
      oldtext: "",
      deleteMemflag: false,
      deleteMemIndex: 99999,
      memMainDisFlag: false,
      chooseIndex: 99999,
      saveWarnFlag: false,
      // 用户id
      user_id: -99999,
      text_id: -99999,
    };
  },
  // filters: {
  //   sortByUpdateTime: function (list) {
  //     return list.sort(function (a, b) {
  //       return new Date(b.updateTime) - new Date(a.updateTime);
  //     });
  //   },
  // },
  mounted() {
    bus.$on("useridFlag", (id) => {
      this.user_id = id;
    });
    this.getNowTime();
    // bus.$on("darkFlag", (flag) => {
    //   this.darkFlag = flag;
    // });
  },
  computed:{
    darkFlag(){
      return this.$store.state.darkFlag
    }
  },
  watch: {
    user_id: {
      handler() {
        axios
          .get(this.$baseUrl+"/getMemList", {
            params: {
              user_id: this.user_id,
            },
          })
          .then((response) => {
            for (let i = 0; i <= response.data.length; i++) {
              let t1 = new Date(response.data[i].createTime);
              let t2 = new Date(response.data[i].updateTime);
              let nt1 = `${t1.getFullYear()}/${
                t1.getMonth() + 1
              }/${t1.getDate()} ${t1.getHours()}:${t1.getMinutes()}`;
              let nt2 = `${t2.getFullYear()}/${
                t2.getMonth() + 1
              }/${t2.getDate()} ${t2.getHours()}:${t2.getMinutes()}`;
              let obj = {
                text_id: response.data[i].text_id,
                title: response.data[i].text.slice(0, 10),
                createTime: nt1,
                updateTime: nt2,
                text: response.data[i].text,
              };
              this.memList.unshift(obj);
              obj = {};
            }
          })
          .catch(function () {
            return;
          });
      },
    },
  },
  beforeDestroy() {
    bus.$off();
  },

  destroyed() {},
  methods: {
    // 展开侧拉框
    listOn() {
      if (this.flag) {
        this.listBoxStyle.width = "350px";
        this.flag = !this.flag;
      } else {
        this.listBoxStyle.width = "0px";
        this.flag = !this.flag;
      }
    },
    // 删除便签列表
    itemDelete(index) {
      if(this.user_id==-99999){
        this.$message.error("请登录后使用该功能");
        return;
      }
      this.deleteMemflag = true;
      this.deleteMemIndex = index;
      this.text_id = this.memList[index].text_id;
    },
    // 确认删除
    deleteMemOK() {
      axios
        .get(this.$baseUrl+"/deleteOneMem", {
          params: {
            user_id: this.user_id,
            text_id: this.text_id,
          },
        })
        .then((response) => {})
        .catch(function () {
          return;
        });
      this.memList.splice(this.deleteMemIndex, 1);
      this.deleteMemflag = false;
    },
    // 取消删除
    deleteMemNo() {
      this.deleteMemIndex = 99999;
      this.deleteMemflag = false;
    },
    // 获取当前时间
    getNowTime() {
      let dd = new Date();
      let h =
        new Date().getHours().toLocaleString() < 10
          ? "0" + new Date().getHours().toLocaleString()
          : new Date().getHours().toLocaleString();
      let m =
        new Date().getMinutes().toLocaleString() < 10
          ? "0" + new Date().getMinutes().toLocaleString()
          : new Date().getMinutes().toLocaleString();
      this.now =
        dd.getFullYear() +
        "/" +
        (dd.getMonth() + 1) +
        "/" +
        dd.getDate() +
        " " +
        h +
        ":" +
        m;
    },
    // 新建便签
    addMem() {
      if(this.user_id==-99999){
        this.$message.error("请登录后使用该功能");
        return;
      }
        this.getNowTime()
          // response.data[0].text.slice(0, 10)
          // this.memList[this.chooseIndex].title = this.memList[this.chooseIndex].text.slice(0, 10);
          // this.memList.slice(this.chooseIndex,1,obj);
          // this.memList[this.chooseIndex] = obj;
          // obj = {};
      axios
        .get(this.$baseUrl+"/addOneMem", {
          params: {
            user_id: this.user_id,
            text: "",
          },
        })
        .then((response) => {
          this.text_id = response.data.insertId;
          let obj = {
            text_id: this.text_id,
            title:"" ,
            createTime: this.now,
            updateTime: this.now,
            text: "",
          };
          this.memList.unshift(obj);
        })
        .catch(function () {
          return;
        });
      // 新增后重新获取该便签
      // axios
      //   .get("http://localhost:8080/getOneMem", {
      //     params: {
      //       user_id: this.user_id,
      //       text_id: this.text_id,
      //     },
      //   })
      //   .then((response) => {
      //     let t1 = new Date(response.data[0].createTime);
      //     let t2 = new Date(response.data[0].updateTime);
      //     let nt1 = `${t1.getFullYear()}/${
      //       t1.getMonth() + 1
      //     }/${t1.getDate()} ${t1.getHours()}:${t1.getMinutes()}`;
      //     let nt2 = `${t2.getFullYear()}/${
      //       t2.getMonth() + 1
      //     }/${t2.getDate()} ${t2.getHours()}:${t2.getMinutes()}`;
      //     let obj = {
      //       text_id: response.data[0].text_id,
      //       title:"" ,
      //       createTime: nt1,
      //       updateTime: nt2,
      //       text: "",
      //     };
      //     // response.data[0].text.slice(0, 10)
      //     // this.memList[this.chooseIndex].title = this.memList[this.chooseIndex].text.slice(0, 10);
      //     this.memList.slice(this.chooseIndex,1,obj);
      //     // this.memList[this.chooseIndex] = obj;
      //     obj = {};
      //   })
      //   .catch(function () {
      //     return;
      //   });
      
      this.memMainDisFlag = true;
      this.chooseIndex = 0;
    },
    // 编辑便签
    openMem(index) {
      this.getNowTime();
      this.oldtext = this.memList[index].text;
      this.memMainDisFlag = true;
      this.chooseIndex = index;
      // this.memList[index].updateTime = this.now;
      this.text_id = this.memList[index].text_id;
    },
    // 保存便签
    saveMem() {
      this.getNowTime();
      this.memList[this.chooseIndex].updateTime = this.now;
      this.memList[this.chooseIndex].text = this.oldtext;
      this.memList[this.chooseIndex].title = this.memList[
        this.chooseIndex
      ].text.slice(0, 10);
      
      // 更新便签
      axios
        .get(this.$baseUrl+"/updateOneMem", {
          params: {
            user_id: this.user_id,
            text_id: this.text_id,
            text: this.oldtext,
          },
        })
        .then((response) => {})
        .catch(function () {
          return;
        });
      // 更新后重新获取该便签
      // axios
      //   .get("http://localhost:8080/getOneMem", {
      //     params: {
      //       user_id: this.user_id,
      //       text_id: this.text_id,
      //     },
      //   })
      //   .then((response) => {
      //     // console.log(response);
      //     let t1 = new Date(response.data[0].createTime);
      //     let t2 = new Date(response.data[0].updateTime);
      //     let nt1 = `${t1.getFullYear()}/${
      //       t1.getMonth() + 1
      //     }/${t1.getDate()} ${t1.getHours()}:${t1.getMinutes()}`;
      //     let nt2 = `${t2.getFullYear()}/${
      //       t2.getMonth() + 1
      //     }/${t2.getDate()} ${t2.getHours()}:${t2.getMinutes()}`;
      //     let obj = {
      //       text_id: response.data[0].text_id,
      //       title: response.data[0].text.slice(0, 10),
      //       createTime: nt1,
      //       updateTime: nt2,
      //       text: response.data[0].text,
      //     };
      //     this.memList[this.chooseIndex] = obj;
      //     obj = {};
      //   })
      //   .catch(function () {
      //     return;
      //   });

      let id = this.user_id;
      this.user_id =id;
      this.memMainDisFlag = false;
      this.oldtext = "";
    },
    // 确认保存
    saveOK() {
      this.saveWarnFlag = false;
      this.saveMem(this.chooseIndex);
    },
    // 取消保存
    saveNO() {
      this.saveWarnFlag = false;
      this.memMainDisFlag = false;
      this.chooseIndex = 99999;
      this.oldtext = "";
    },
    // 保存警告弹窗
    closeMemMain() {
      this.saveWarnFlag = true;
    },
  },
};
</script>

<style scoped>
.leftListBox {
  width: 0;
  max-width: 350px;
  background-color: rgb(237, 237, 237);
  float: left;
  transition: all 0.3s !important;
  position: relative;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}
.leftListBox .htitle {
  font-size: 30px;
  margin-top: 20px;
  text-align: center;
  white-space: nowrap;
}
.leftListBoxDark {
  background-color: #2e2e2e;
  color: #fff;
}
.leftListBox::-webkit-scrollbar {
  width: 6px;
}
.leftListBox::-webkit-scrollbar-button {
  display: block;
  height: 20px;
}
.leftListBox::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
.leftListBoxDark::-webkit-scrollbar-thumb {
  width: 6px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 6px;
}
.btnBox {
  width: 60px;
  height: 100vh;
  float: left;
  transition: all 0.3s;
  opacity: 0.2;
}
.btnBox:hover {
  opacity: 1;
}
.openBtn {
  float: left;
  width: 35px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 45px;
  border-radius: 0rem 10rem 10rem 0rem;
  cursor: pointer;
  margin-top: 45vh;
  transition: all .2s;
}
.openBtn:hover{
  color: #fdaf27;
}
.openBtnDark {
  background-color: #2e2e2e;
  color: #fff;
}
.openBtnDark:hover{
  color: #fdaf27;
}
.openBtnDark span {
  color: #fff;
}
.openBtnDark:hover {
  color: rgb(236, 158, 0);
}
.openBtnChange {
  float: left;
  width: 35px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 10rem 0rem 0rem 10rem;
  margin-top: 45vh;
  transform: scale(-1, 1);
}
.openBtnChangeDark {
  background-color: #363636;
  float: left;
  width: 35px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  cursor: pointer;
  border-radius: 10rem 0rem 0rem 10rem;
  margin-top: 45vh;
  transform: scale(-1, 1);
}
/* 便签列表 */
.memListBox {
  width: 300px;
  height: 500px;
  margin: 15px;
}
.memItem {
  width: 300px;
  height: 60px;
  padding: 10px;
  background-color: #fff;
  border-radius: 18px;
  box-shadow: 0 0 1px 1px rgba(125, 125, 125, 0.1);
  margin-bottom: 10px;
  transition: all 0.2s;
  cursor: pointer;
  position: relative;
}
.memItem:hover {
  box-shadow: 0 0 2px 2px rgba(125, 125, 125, 0.25);
}
.memItem i {
  font-size: 24px;
  opacity: 0;
  float: right;
  margin-right: 15px;
  margin-top: 18px;
  transition: all 0.2s;
}
.memItem:hover i {
  opacity: 1;
}
.memItem i:hover {
  color: #fdaf27;
}
.memItemDark {
  background-color: #424242;
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3);
  color: #fff;
}
.memItemDark .memTime {
  color: rgb(159, 159, 159);
}
.memItemDark:hover {
  box-shadow: 0 0 2px 1px rgba(255, 255, 255, 0.5);
}
.memItemTitle {
  text-align: left;
  margin: 5px 0 0 20px;
  display: block;
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 20px;
}
.memTime {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.4);
  position: absolute;
  bottom: 18px;
  left: 30px;
}
/* 新建便签按钮 */
.addMem {
  width: 50px;
  height: 50px;
  border-radius: 50px;
  background-color: #fdaf27;
  /* position: absolute; */
  position: fixed;
  bottom: 30px;
  left: 150px;
  text-align: center;
  transition: all 0.2s;
}
.addMem:hover {
  box-shadow: 0 0 2px 2px #a3a3a36d;
}
.addMem i {
  font-size: 30px;
  color: #fff;
  line-height: 50px;
}
/* 确认删除弹窗 */
.addNavBg {
  width: 400px;
  height: 100vh;
  backdrop-filter: blur(1.5px);
  z-index: 998;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.addNavBox {
  width: 270px;
  height: 500px;
  margin-right: 50px;
  background-color: #fff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
  position: relative;
  z-index: 999;
}
.addNavBox h2 {
  text-align: center;
  margin-top: 20px;
}
.addNavBox button {
  width: 70px;
  height: 40px;
  border-radius: 1rem;
  background-color: #fabe26;
  border: rgb(246, 170, 28) 1px solid;
  margin-top: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.addNavBoxP {
  text-align: left;
  font-size: 14px;
  margin: 5px 20px;
}
.addNavBoxDark {
  background-color: #474747;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.25);
  color: #fff;
}
.addNavBoxDark h2 {
  text-align: center;
  margin-top: 20px;
  color: #fff;
}
/* 按钮 */
.addBtnBox {
  width: 200px;
  position: absolute;
  bottom: 10px;
  left: 50px;
}
.addNavBox button:hover {
  box-shadow: 0px 0px 1.5px 1.5px rgba(246, 170, 28, 0.45);
}
.addNavBox button:active {
  box-shadow: 0px 0px 1px 1px rgba(246, 170, 28, 0.15);
}
.appear-enter-active,
.appear-leave-active {
  transition: all 0.3s;
}
.appear-enter,
.appear-leave-to {
  opacity: 0;
}
/* 便签主体 */
/* 便签背景罩子 */
.memMainBg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.272);
    display: flex;
  justify-content: center;
  align-items: center;
}
.memMainBgDark{
  background-color: rgba(0, 0, 0, 0.3);
}
.memMainBox {
  width: 750px;
  height: 500px;
  position: relative;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
}
/* 关闭警告窗 */
.saveWarnBg {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.saveWarnBgDark{
  background-color: rgba(0, 0, 0, 0.1);
}
.saveWarnBox {
  width: 350px;
  height: 200px;
  background-color: rgba(232, 232, 232, 0.505);
  border-radius: 20px;
  text-align: center;
  z-index: 100;
}
.saveWarnBox .stitle {
  font-size: 22px;
  color: rgb(87, 87, 87);
  margin-top: 35px;
  margin-bottom: 20px;
  font-weight:bold;
}
.saveWarnBox .stitleDark{
  color: #fff;
}
.saveWarnBox .sP {
  font-size: 18px;
  color: rgb(87, 87, 87);
}
.saveWarnBox .sPDark{
  color: #fff;
}
.saveWarnBtnBox button {
  width: 90px;
  height: 35px;
  margin-top: 25px;
  border-radius: 20px;
  background-color: #fdaf27;
  transition: all 0.2s;
  box-shadow: 0 0 1px 1px #c6c6c69a;
  cursor: pointer;
  color: rgb(46, 46, 46);
}
.saveWarnBtnBox button:hover {
  box-shadow: 0 0 1px 1px #a0a0a0cb;
}
.saveWarnBoxDark {
  background-color: #262626;
  color: #fff;
}
.memMainBoxDark {
  background-color: #424242;
  color: #fff;
}
.memMainBoxDark textarea {
  background-color: #424242;
  color: #fff;
}
.memMainClose {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  border-radius: 20px;
  line-height: 35px;
  transition: all 0.2s;
}
.memMainClose:hover {
  color: #fdaf27;
}
.memMainClose i {
  font-size: 26px;
}
.memMainBox textarea {
  width: 660px;
  height: 380px;
  margin: 35px;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px;
  font-family: Yahei;
}
.memMainTimeBox {
  width: 300px;
  height: 40px;
  position: absolute;
  bottom: 20px;
  left: 35px;
}
.saveI {
  width: 80px;
  height: 30px;
  display: block;
  font-size: 18px;
  position: absolute;
  bottom: 20px;
  right: 35px;
  transition: all 0.2s;
  cursor: pointer;
}
.saveI:hover {
  color: #fdaf27;
}
</style>